<template>
  <view class="filter-item">
    <text class="font-item-text">年龄范围</text>
    <picker
      mode="multiSelector"
      :range="[[...Array(61).keys()].map((n) => n + 20), [...Array(61).keys()].map((n) => n + 20)]"
      :value="ageRange.length ? [ageRange[0] - 20, ageRange[1] - 20] : [0, 20]"
      @change="onChange"
    >
      <view class="uni-input">
        <template v-if="ageRange.length">
          <text class="range-text">{{ ageRange[0] }}岁 ~ {{ ageRange[1] }}岁</text>
        </template>
        <template v-else>请选择年龄范围</template>
        <uni-icons type="arrowright" size="20" class="icon"></uni-icons>
      </view>
    </picker>
  </view>
</template>

<script setup lang="ts">
import { ref, watch, defineProps, defineEmits } from 'vue'

const props = defineProps<{
  ageRange: number[]
}>()
const emit = defineEmits<{
  (e: 'update:ageRange', value: number[]): void
}>()

const ageRange = ref<number[]>([...props.ageRange])

watch(
  () => props.ageRange,
  (newVal) => {
    ageRange.value = [...newVal]
  },
)

const onChange = (e) => {
  if (e.detail.value.length) {
    ageRange.value = e.detail.value.map((v) => v + 20)
    emit('update:ageRange', ageRange.value)
  }
}
</script>

<style scoped>
.filter-item {
  font-size: 26rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  cursor: pointer;
  margin-bottom: 40rpx;
}
.font-item-text {
  color: #a9a5a3;
}

.uni-input {
  display: flex;
  align-items: center;
}

.range-text {
  color: #1e90ff;
}

.icon {
  color: #ccc;
  margin-left: 20rpx;
}

.popup-content {
  padding: 40rpx;
  background-color: #fff;
  width: 100%;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.15);
  z-index: 1000;
  margin-top: 20rpx;
}

.button-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8rpx; /* 按钮之间的间距 */
}

.checkbox-label,
.custom-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(33.3333% - 8rpx); /* 每行三个按钮，并考虑间距 */
  padding: 0rpx;
  height: 80rpx;
  border-radius: 8rpx;
  box-sizing: border-box;
  font-size: 26rpx;
  position: relative;
  cursor: pointer;
  user-select: none;
  transition: all 0.3s;
  margin: 4rpx 0; /* 上下间距为4rpx，总间距为8rpx */
}

.checkbox-label {
  /* border: 2rpx solid #ff0000; */
  background-color: #f5f5f5;
  color: #666;
}

.custom-button {
  border: 2rpx solid #00a0e9;
  color: #00a0e9; /* 文字颜色 */
  background-color: #e5f7f9; /* 背景颜色 */
}

.custom-button.selected::before {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 35rpx 35rpx 22rpx 20rpx;
  border-color: transparent rgb(1, 170, 190) rgb(1, 170, 190) transparent;
}

.custom-button.selected .checkmark::before {
  content: '';
  color: white;
  font-size: 32rpx;
  position: absolute;
  top: 50%;
  left: 63%;
  transform: translate(-50%, -50%);
  z-index: 1;
}
.custom-button .checkmark {
  position: absolute;
  bottom: 4rpx;
  right: 4rpx;
  width: 28rpx;
  height: 28rpx;
  border-radius: 4rpx;
  text-align: center;
  /* line-height: 28rpx; */
}
</style>
